<template>
    <div class="demo-collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="Props 属性" name="1">        
          <prop></prop>
        </el-collapse-item>
        <el-collapse-item title="组件交互-事件" name="2">
          <eventcomponent></eventcomponent>
        </el-collapse-item>
        <el-collapse-item title="组件交互-Vmodel" name="3">
          <vmodelcomponent></vmodelcomponent>        
        </el-collapse-item>
        <el-collapse-item title="组件交互-slot" name="4">
         <slotcomponent></slotcomponent>        
        </el-collapse-item>
      </el-collapse>
    </div>
  </template>
  <script setup lang="ts">
  import { ref } from "vue";
  import prop from "../components/deep/props.vue";
  import eventcomponent from "../components/deep/eventcomponent.vue";
  import vmodelcomponent from "../components/deep/vmodelcomponent.vue"; 
  import slotcomponent from "../components/deep/solt.vue"; 
  const activeNames = ref(["1"]);
  const handleChange = (val: string[]) => {
    console.log(val);
  };
  </script>